<template>
  <div class="content">
    <div class="con">
      <div class="container">
        <div class="aside">
          <div class="aside_libray">
            <el-collapse v-model="collsName">
              <!-- <el-collapse-item name="1">
                <template slot="title">
                  <div class="operation">
                    <p>
                      <img style="width: 20px; height: 20px;margin: 0px 10px;"
                        src="@/assets/images/comparisonManage/synchronization.png">
                      同步库
                    </p>
                    <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                      <i class="el-icon-plus" @click="addLibray('sync')"></i>
                    </el-tooltip>
                  </div>
                </template>

                <div>
                  <el-card class="box-card">
                    <div v-for="(item, index) in pedestalListSync" :key="index" class="text item text_item"
                      @click="cardClick('sync', item, index)"
                      :class="{ that_card: thatSync.isSync === 1 && thatSync.syncKeys === index }">
                      <div class="card_top">
                        <p>
                          <img v-if="item.tableType === 'person'" src="@/assets/images/comparisonManage/user.png" alt="">
                          <img v-if="item.tableType === 'car'" src="@/assets/images/comparisonManage/car.png" alt="">
                          {{ item.tableName }}
                        </p>
                        <i></i>
                      </div>
                      <div class="card_bottom">
                        {{ item.startTime }}
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-collapse-item> -->
              <el-collapse-item name="1">
                <template slot="title">
                  <div class="operation">
                    <p>
                      <img style="width: 20px; height: 20px;margin: 0px 10px;"
                        src="@/assets/images/comparisonManage/localLibrary.png">
                      本地库
                    </p>
                    <el-tooltip class="item" effect="dark" content="添加" placement="top-start">
                      <i class="el-icon-plus" @click="addLibray('local')"></i>
                    </el-tooltip>
                  </div>
                </template>
                <div>
                  <el-card class="box-card">
                    <div v-for="(item, index) in pedestalList" :key="index" class="text item text_item"
                      @click="cardClick('local', item, index)"
                      :class="{ that_card: thatSync.isSync === 2 && thatSync.syncKeys === index }">
                      <div class="card_top">
                        <p>
                          <img src="@/assets/images/comparisonManage/user.png" alt="">
                          {{ item.tableName }}
                        </p>
                        <i></i>
                      </div>
                      <div class="card_bottom">
                        {{ item.startTime }}
                      </div>
                    </div>
                  </el-card>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </div>
        <div class="main_box">
          <div class="header" v-if="isAddLibrary">
            <!-- <div class="header_left">
              <h3>比对库管理</h3>
              <div>
                <el-breadcrumb separator="/">
                  <el-breadcrumb-item v-for="route in breadcrumbRoutes" :key="route.path" :to="{ path: route.path }">{{
                    route.meta.title }}
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </div> -->
            <div class="header_right">
              <div class="header_box">
                <span>{{ thatSync.libraryInfo.tableName }}</span>
                <span>{{ thatSync.libraryInfo.bwType === '1' ? '白名单' : '黑名单' }}</span>
                <span>{{ thatSync.libraryInfo.created_at }}</span>
              </div>
              <div class="header_box">
                <el-tooltip class="item" effect="dark" content="底库状态" placement="top-start">
                  <el-switch @change="switchChange" v-model="thatSync.enable" active-color="#4E94FF"
                    inactive-color="#BBBBBB">
                  </el-switch>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="删除底库" placement="top-start">
                  <img src="@/assets/images/comparisonManage/deleteLibray.png" @click="delectLibrary">
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="编辑底库" placement="top-start">
                  <img src="@/assets/images/comparisonManage/editLibray.png" @click="editLibrary">
                </el-tooltip>

              </div>
            </div>
          </div>

          <div class="main_box_table" v-if="isAddLibrary">
            <div class="main_box_header">
              <div>
                本库共有{{ productPagerOptions.totalCount }}条数据
              </div>
              <div class="main_box_hr" style="position:relative;">
                <el-input @change="inputChange" placeholder="姓名/性别/身份证号/手机号" v-model="searchInput">
                  <template slot="append">
                    <el-button @click="searchClick" icon="el-icon-search" style="margin-right: 5px">搜索</el-button>
                  </template>
                </el-input>
                <el-tooltip class="item" effect="dark" content="批量删除" placement="top-start">
                  <img src="@/assets/images/comparisonManage/deleteLibray.png" @click="deleteAll">
                </el-tooltip>
                <el-tooltip v-if="thatSync.libraryInfo.tableType === 'car'" class="item" effect="dark" content="添加车辆"
                  placement="top-start">
                  <i style="#ccc" class="el-icon-truck add_car" @click="addCar"></i>
                </el-tooltip>
                <el-tooltip v-else class="item" effect="dark" content="上传图片" placement="top-start">
                  <img src="@/assets/images/comparisonManage/uploadImage.png" @click="uploadImg">
                </el-tooltip>
                <el-tooltip v-if="thatSync.libraryInfo.tableType === 'car'" class="item" effect="dark" content="上传车牌"
                  placement="top-start">
                  <img src="@/assets/images/comparisonManage/uploadImage.png" @click="uploadPlateNumber">
                </el-tooltip>
                <div v-if="showUploadImg" style="position:absolute;top:45px;right:0px;z-index:9">
                  <i style="position: absolute; top :0;right: 0;color: #000;z-index: 999;" class="el-icon-close"
                    @click="closeUpload"></i>
                  <el-upload class="upload-demo" drag :data="uploadData" action="/data/api-v/dbperson/moreFileUpload"
                    :on-success="onSuccess" :headers="myHeaders" multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </div>

              </div>
            </div>
            <div class="list-view">
              <div class="list_table">
                <TableCommonView :table-list="tableList" @selCommonClick="selCommonClick" @selTableCol="selTableCol"
                  @getSelectArray="getSelectArray" @setSwitchType="setSwitchType">
                  <template slot="tableButton">
                    <el-table-column label="操作" width="220" fixed="right">
                      <template slot-scope="scope">
                        <el-button type="text" size="small" @click="btnEdit(scope.row)" style="margin-right: 5px">编辑
                        </el-button>
                        <!-- <el-button type="text" size="small" @click="btnLook(scope.row)"
                          style="margin-right: 5px">查看
                        </el-button> -->
                        <el-button type="text" size="small" @click="btnFind(scope.row)" style="margin-right: 5px">查找
                        </el-button>
                        <el-button type="text" size="small" @click="btnCopy(scope.row)" style="margin-right: 5px">复制
                        </el-button>
                        <el-button type="text" size="small" @click="btnMove(scope.row)" style="margin-right: 5px">移动
                        </el-button>
                        <el-button type="text" size="small" @click="btnDele(scope.row)" style="margin-right: 5px">删除
                        </el-button>

                      </template>
                    </el-table-column>
                  </template>
                </TableCommonView>
              </div>
            </div>
            <div class="btn-pager">
              <PagerView class="page" layout="sizes, prev, pager, next" :pager-options="productPagerOptions"
                :pageSizes="productPagerOptions.pageSizeOption" @current-change="currentProductHandler"
                @size-change="productChangeHandler" />
            </div>
          </div>
          <div v-else class="form_info_wrap">
            <div class="form_info">
              <div class="main_box_header info_title">
                底库信息
              </div>
              <el-form ref="form" :model="libraryForm" label-position="left" label-width="100px" size="mini">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="名称" prop="tableName">
                      <el-input v-model="libraryForm.tableName" style="width:90%"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="对接数据库" prop="name">
                      <el-select :disabled="formDisabled" v-model="value" placeholder="请选择对接数据库" style="width:90%">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row class="rowStyle">
                  <el-col :span="12" style="display:flex;flex-flow: column wrap;flex-direction: column-reverse;">
                    <el-form-item label="有效时间" prop="dateValue">
                      <el-date-picker :disabled="libraryForm.isForever" @change="changeTime" style="width:90%"
                        v-model="libraryForm.dateValue" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                      </el-date-picker>
                    </el-form-item>
                    <el-checkbox @change="isForeverChange" v-model="libraryForm.isForever">是否永久有效</el-checkbox>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="库地址" prop="tableName">
                      <el-input :disabled="formDisabled" v-model="libraryForm.tableName" style="width:90%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="黑白名单" prop="bwType">
                      <el-radio v-model="libraryForm.bwType" label="1">黑名单</el-radio>
                      <el-radio v-model="libraryForm.bwType" label="2">白名单</el-radio>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="用户名" prop="tableName">
                      <el-input :disabled="formDisabled" v-model="libraryForm.tableName" style="width:90%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="类型" prop="tableType">
                      <el-select v-model="libraryForm.tableType" placeholder="请选择类型" style="width:90%">
                        <el-option v-for="item in libraryOptions" :key="item.key" :label="item.tableType"
                          :value="item.tableType">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="密码" prop="name">
                      <el-input :disabled="formDisabled" v-model="libraryForm.name" style="width:90%"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <div class="formButton">
                  <el-button @click="cancelAddLibrary">取消</el-button>
                  <el-button @click="addBaseClick">保存</el-button>
                </div>
              </el-form>
            </div>
          </div>

          <AddDeviceLibrary v-if="editConfigForm.deviceDrawer" :editConfigForm="editConfigForm" />
          <AddPlateNumber v-if="editPlateNumber.deviceDrawer" :editConfigForm="editPlateNumber" />
          <PreviewImageDialog v-if="editMoveForm.visible" :edit-common-config="editMoveForm" />
          <CaptureDetails :edit-common-config="captureDialog" />
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import {
  getPersonList,
  queryDbTables,
  addBase,
  deleteDBtablesById,
  updateBase,
  deleteMoreDbPerson,
  deleteDbPersonById,
  updateDbTableStatus,
  updateBaseCar,
} from "@/api/baseLibrary/baseLibrary"

import AddPlateNumber from '@/views/comparisonManage/comparisonLibrary/components/addPlateNumber'
import AddDeviceLibrary from '@/views/comparisonManage/comparisonLibrary/components/addDeviceLibrary'
import PreviewImageDialog from "@/views/comparisonManage/comparisonLibrary/components/PreviewImageDialog"
import CaptureDetails from "@/views/comparisonManage/comparisonLibrary/components/captureDetails"

export default {
  name: "CustomM",
  props: {

  },
  components: {
    AddDeviceLibrary,
    PreviewImageDialog,
    CaptureDetails,
    AddPlateNumber
  },
  data() {
    return {
      // switchValue: true,
      formDisabled: true,
      isFormType: '新建',
      // url:'',
      url: 'http://192.168.20.119:8007/data/api-v/dbperson/moreFileUpload',
      tableList: {}, // 列表
      tableColumn: [
        { label: "照片", prop: "personPicUrl", showImage: true, url: "123feeeeeeeee" },
        { label: "生效状态", prop: "enable", isSwitch: true },
        { label: "姓名", prop: "personName", },
        { label: "性别", prop: "sex", },
        { label: "身份证号", prop: "idCard", },
        { label: "手机号", prop: "phoneNum", },
        { label: "等级", prop: "monitorLevel", },
        { label: "入库时间", prop: "created_at", }
      ],
      showCol: ["照片", "生效状态", "姓名", "性别", "身份证号", "手机号", "等级", "入库时间"],
      input2: "",
      isAddLibrary: true,
      libraryForm: {
        tableName: '',
        dateValue: [],
        tableType: 'person',
        isForever: false,
        id: '',
        bwType: '1',
        tableDesc: '',
        analyServerId: 'local',
      },
      value: 'xxx',
      value1: 'xxx',
      options: [],
      pedestalList: [],
      pedestalListSync: [],
      libraryOptions: [
        {
          tableType: "person",
          key: 0
        },
        {
          tableType: "car",
          key: 1
        }
      ],
      thatSync: {
        isSync: 2,
        syncKeys: 0,
        id: '',
        enable: 0,
        libraryInfo: {}
      },
      collsName: ["1"],
      editConfigForm: {
        typeInfo: "user",
        deviceDrawer: false,
        title: "修改信息",
        infomation: {}
      },
      editPlateNumber: {
        deviceDrawer: false,
        title: "上传车牌",
        infomation: {}
      },
      editMoveForm: {
        visible: false,
        title: "移动至",
        infomation: {},
      },
      captureDialog: {
        visible: false,
        title: "抓拍详情",
        infomation: {},
      },
      showUploadImg: false,
      myHeaders: {
        token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJVc2VySWQiOiI3NjFlM2NmNi05ZjRmLTQyMGQtYjc0ZC01NzNlZDc2NzA5MjAiLCJVc2VybmFtZSI6ImFkbWluIiwiUGFyZW50SWQiOiJhZG1pbiIsIlVzZXJUeXBlIjoyLCJSb2xlSWRzIjpbMV0sIk9yZ0lEIjoxLCJCdWZmZXJUaW1lIjo4NjQwMCwiZXhwIjoxNzA1MDQ1ODgyLCJpc3MiOiJxbVBsdXMiLCJuYmYiOjE3MDQ3ODU2ODJ9.Nn5BJbp9GV2JkW7YqVKTr0hjEsaJDdIrUlSLmgRm9i4"
      },
      deleteIds: [],
      searchInput: '',
      productPagerOptions: {
        currPage: 1,
        pageSize: 10,
        totalCount: 0,
      },
    };
  },
  computed: {
    breadcrumbRoutes() {
      return this.$route.matched // 获取当前路由的所有嵌套路径段
    },
    uploadData() {
      return {
        tableId: this.thatSync.id
      }
    }
  },
  created() {
    this.setTable()
    // this.queryDbTables(2)
    this.queryDbTablesList(2)
    this.queryDbTables(1)

  },
  mounted() {

  },
  watch: {

  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        // maxHeight:750,
        selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        selectBox: true,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    // 详情
    selCommonClick(row) {
      console.log(row, "详情")
    },
    // 添加库
    addLibray(val) {
      this.isFormType = '新建'
      this.libraryForm.analyServerId = val
      this.isAddLibrary = false;
    },
    cancelAddLibrary() {
      this.isAddLibrary = true;
    },
    // 仅获取本地库列表
    queryDbTablesList(val) {
      queryDbTables({ isSync: val }).then((res) => {
        this.productPagerOptions.totalCount = res.data.total
        if (val === 2) {
          this.pedestalList = res.data.datalist
        } else if (val === 1) {
          this.pedestalListSync = res.data.datalist
        }
      })
    },
    //  本地库及人员列表
    queryDbTables(val) {
      queryDbTables({ isSync: val }).then((res) => {
        this.productPagerOptions.totalCount = res.data.total
        if (val === 2 && res.data.datalist.length > 0) {
          this.pedestalList = res.data.datalist
          this.thatSync.id = res.data.datalist[this.thatSync.syncKeys].id
          this.getPersonList({
            tableId: res.data.datalist[this.thatSync.syncKeys].id,
            page: this.productPagerOptions.currPage,
            size: this.productPagerOptions.pageSize,
            contentValue: "",
            orderType: "desc",
            orderName: "created_at",
          })
        } else if (val === 1 && res.data.datalist.length > 0) {
          this.thatSync.enable = res.data.datalist[this.thatSync.syncKeys].enable === 1 ? true : false
          this.thatSync.id = res.data.datalist[this.thatSync.syncKeys].id
          this.getPersonList({
            tableId: res.data.datalist[this.thatSync.syncKeys].id,
            page: this.productPagerOptions.currPage,
            size: this.productPagerOptions.pageSize,
            contentValue: "",
            orderType: "desc",
            orderName: "created_at",
          })
          this.thatSync.libraryInfo = res.data.datalist[this.thatSync.syncKeys]
          this.pedestalListSync = res.data.datalist
        }
      })
    },
    //  获取本地库对应 人员列表
    getPersonList(params) {
      getPersonList(params).then((res) => {
        console.log(res, "人员列表")
        if (res.success && res.data.datalist) {
          res.data.datalist.map((item) => {
            item.personPicUrl = '/httpImage/' + item.personPicUrl + '.jpeg' || ''
            item.enable = item.enable === 1 ? true : false,
              // item.carPicUrls = '/httpImage/' + item.carPicUrls.split(";")[0]
              item.carPicUrls = ""
            // item.sex=item.sex===0?'女':'男'
            if (item.sex != "" && item.sex === "1") {
              item.sex = "男"
            } else if (item.sex != "" && item.sex === "2") {
              item.sex = "女"
            }
          })
          this.tableList.tableInfomation = res.data.datalist
          this.productPagerOptions.totalCount = res.data.total
        } else {
          // this.$message.error(res.msg)
          console.log(res.msg, "人员列表")
        }
      })
    },

    setParams() {
      let params = {
        tableName: this.libraryForm.tableName,
        startTime: this.libraryForm.dateValue[0],
        endTime: this.libraryForm.dateValue[1],
        tableType: this.libraryForm.tableType,
        isForever: this.libraryForm.isForever,
        bwType: this.libraryForm.bwType,
        analyServerId: this.libraryForm.analyServerId,
        id: "",
        tableDesc: "",
      }
      return params
    },
    // 添加本地库
    addBaseClick() {
      let params = this.setParams()
      // 是否永久
      if (params.isForever) {
        params.startTime = this.$moment().format("YYYY-MM-DD HH:mm:ss")
      }
      if (this.isFormType === '新建') {
        addBase(params).then((res) => {
          if (res.success) {
            this.isAddLibrary = true
            this.queryDbTablesList(1)
            this.queryDbTablesList(2)
            this.$message.success(`${params.tableName}库添加成功！`)
          }
        })
      } else if (this.isFormType === '编辑') {
        params.id = this.thatSync.libraryInfo.id
        updateBase(params).then((res) => {
          if (res.success) {
            this.isAddLibrary = true
            this.queryDbTables(this.thatSync.isSync)
            this.$message.success(`底库编辑成功！`)
          }
        })
      }
    },
    changeTime(time) {
      console.log(time, "选择time", this.libraryForm.dateValue)
    },
    // 是否永久有效
    isForeverChange(newVal) {
      this.libraryForm.isForever = newVal
      if (newVal) {
        this.libraryForm.dateValue = [
          new Date(this.$moment().format("YYYY-MM-DD HH:mm:ss")),
          new Date('')
        ]
      }
    },
    //
    cardClick(isSync, item, index) {
      this.isFormType = "编辑"
      console.log(item, "item")
      if (item.tableType === "person") {
        this.showCol = ["照片", "生效状态", "姓名", "性别", "身份证号", "手机号", "等级", "入库时间"],
          this.tableColumn = [
            { label: "照片", prop: "personPicUrl", min: 130, showImage: true, url: "" },
            { label: "生效状态", prop: "enable", min: 150, isSwitch: true },
            { label: "姓名", prop: "personName", min: 130, },
            { label: "性别", prop: "sex", min: 130 },
            { label: "身份证号", prop: "idCard", min: 130 },
            { label: "手机号", prop: "phoneNum", min: 130 },
            { label: "等级", prop: "monitorLevel", min: 130 },
            { label: "入库时间", prop: "created_at", min: 130 }
          ]
        this.setTable()
      } else if (item.tableType === "car") {
        this.showCol = ["车辆照片", "生效状态", "车牌号", "车辆类型", "车辆品牌", "车身颜色", "车主姓名", "车主性别", "入库时间"],
          this.tableColumn = [
            { label: "车辆照片", prop: "carPicUrls", min: 110, showImage: true, url: "" },
            { label: "生效状态", prop: "enable", isSwitch: true },
            { label: "车牌号", prop: "carNo", },
            { label: "车辆类型", prop: "carType", },
            { label: "车辆品牌", prop: "carBrand", },
            { label: "车身颜色", prop: "carColor", },
            { label: "车主姓名", prop: "personName", },
            { label: "车主性别", prop: "sex", },
            { label: "入库时间", prop: "created_at", },
          ]
        this.setTable()
      }
      console.log(isSync, item, index, "当前卡片")
      this.thatSync.isSync = isSync === 'sync' ? 1 : 2
      this.thatSync.syncKeys = index
      this.thatSync.id = item.id
      this.thatSync.enable = item.enable === 1 ? true : false
      this.thatSync.libraryInfo = item

      this.getPersonList({
        tableId: item.id,
        page: this.productPagerOptions.currPage,
        size: this.productPagerOptions.pageSize,
        contentValue: "",
        orderType: "desc",
        orderName: "created_at",
      })
      this.libraryForm = {
        ...item,
        dateValue: [
          item.startTime,
          item.endTime
        ]
      }
    },
    deleteDBtablesById(id) {
      deleteDBtablesById(id).then((res) => {
        if (res.success) {
          this.queryDbTablesList(this.thatSync.isSync)
          this.$message({
            type: 'success',
            message: '底库删除成功!'
          });
        }
      })
    },
    // 删除库
    delectLibrary() {
      this.$confirm(`确定删除该底库?`, '删除底库', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDBtablesById(this.thatSync.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 编辑库
    editLibrary() {
      this.isFormType = '编辑'
      this.isAddLibrary = false
      this.libraryForm = {
        ...this.thatSync.libraryInfo,
        dateValue: [
          new Date(this.thatSync.libraryInfo.startTime),
          new Date(this.thatSync.libraryInfo.endTime)
        ]
      }
    },
    // 编辑
    btnEdit(row) {
      console.log(row, this.thatSync.libraryInfo.tableType, "编辑")
      if (this.thatSync.libraryInfo.tableType === "person") {
        this.editConfigForm = {
          typeInfo: 'user',
          deviceDrawer: true,
          title: "修改信息",
          infomation: {
            user: { ...row, libraryId: this.thatSync.id, enable: this.thatSync.enable }
          }
        }
        console.log(this.editConfigForm, "看看是啥")
      } else if (this.thatSync.libraryInfo.tableType === "car") {
        this.editConfigForm = {
          typeInfo: "car",
          deviceDrawer: true,
          title: "车辆信息",
          infomation: {
            car: {
              ...row,
              carDialogType: "编辑",
              tableId: this.thatSync.id,
              enable: this.thatSync.enable
            }
          }
        }
      }
    },
    // 查看
    // btnLook(row){
    //   console.log(row,"查看")
    //   this.captureDialog.visible=true
    // },
    // 查找
    btnFind(row) {
      console.log(row, "查找")
      // 跳转详情页面
      this.$router.push({ path: '/statisticsQuery/portraitFilingPage/details', query: { id: row.id } })
      // row.personPicUrl = row.personPicUrl.replace("/httpImage/", "").replace(/\.jpeg/g, '');
      // // row.personPicUrl="192.168.20.223:6700/32,81f7e93dc480?collection=DSPAD010120211015235820-persistent"
      // // row.personPicUrl="http://192.168.20.223:6700/34,8196598de435?collection=DSPAD010120211015235820-persistent.jpeg"
      // this.$router.push({
      //   name: 'statisticsQuery',
      //   params: {
      //     userInfo: row,
      //   }
      // });

    },
    // 复制
    btnCopy(row) {
      this.editMoveForm.title = "复制至"
      this.editMoveForm.visible = true
      if (this.thatSync.libraryInfo.bwType === "1") {
        this.editMoveForm.infomation = {
          ...row,
          thatSync: this.thatSync,
          showBlack: true,
          dialogType: "copy"
        }
      } else if (this.thatSync.libraryInfo.bwType === "2") {
        this.editMoveForm.infomation = {
          ...row,
          thatSync: this.thatSync,
          showWhite: true,
          dialogType: "move"
        }
      }
    },
    // 移动
    btnMove(row) {
      this.editMoveForm.title = "移动至"
      this.editMoveForm.visible = true
      this.editMoveForm.infomation = {
        ...row,
        thatSync: this.thatSync,
        showBlack: true,
        showWhite: true,
        dialogType: 'move',
      }
      console.log(row, "移动")
    },
    // 删除人员
    btnDele(row) {
      console.log(row.id, "删除")
      this.$confirm('确定删除该底库人员？', '批量删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDbPersonById(row.id).then((res) => {
          if (res.success) {
            this.queryDbTables(this.thatSync.isSync)
            this.$message.success("删除成功!")
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },

    // 图片
    uploadImg() {
      this.showUploadImg = !this.showUploadImg
    },
    // 车牌
    uploadPlateNumber() {
      this.editPlateNumber.infomation = {
        tableId: this.thatSync.id,
      }
      this.editPlateNumber.deviceDrawer = true
    },
    // 图片上传
    onSuccess(res) {
      if (res.success) {
        this.$message.success("上传成功!")
        this.queryDbTables(this.thatSync.isSync)
      }
    },
    // 上传车辆
    addCar() {
      this.editConfigForm = {
        typeInfo: "car",
        deviceDrawer: true,
        title: "车辆信息",
        infomation: {
          car: { carDialogType: "新增", tableId: this.thatSync.id, enable: this.thatSync.enable }
        }
      }
    },
    // checkbox 选择
    getSelectArray(val) {
      val.map((item) => {
        this.deleteIds.push(item.id)
      })
    },
    // 批量删除
    deleteAll() {
      if (this.deleteIds.length === 0) {
        this.$message.error("请先勾选删除项")
      } else {
        this.$confirm('确定删除该底库选中人员？', '批量删除', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteMoreDbPerson({
            ids: this.deleteIds,
          }).then((res) => {
            if (res.success) {
              this.queryDbTables(this.thatSync.isSync)
              this.$message.success("删除成功!")
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      }
    },
    // 搜索
    searchClick() {
      this.getPersonList({
        tableId: this.thatSync.id,
        page: this.productPagerOptions.currPage,
        size: this.productPagerOptions.pageSize,
        contentValue: this.searchInput,
        orderType: "desc",
        orderName: "created_at",
      })
    },
    // 搜索
    inputChange(val) {
      this.getPersonList({
        tableId: this.thatSync.id,
        page: this.productPagerOptions.currPage,
        size: this.productPagerOptions.pageSize,
        contentValue: val,
        orderType: "desc",
        orderName: "created_at",
      })
    },
    // 分页前后跳转
    currentProductHandler(val) {
      this.productPagerOptions.currPage = val
      this.getPersonList({
        tableId: this.thatSync.id,
        page: this.productPagerOptions.currPage,
        size: this.productPagerOptions.pageSize,
        contentValue: "",
        orderType: "desc",
        orderName: "created_at",
      })
      // this.searchingBtn(this.VideoPhotoData.page)
    },
    // 分页条目选择
    productChangeHandler(val) {
      this.productPagerOptions.pageSize = val
      this.getPersonList({
        tableId: this.thatSync.id,
        page: this.productPagerOptions.currPage,
        size: this.productPagerOptions.pageSize,
        contentValue: "",
        orderType: "desc",
        orderName: "created_at",
      })
    },
    // 状态开关
    switchChange(newVal) {
      console.log(newVal, "啊哈哈")
      updateDbTableStatus({
        id: this.thatSync.id,
        enable: newVal === true ? 1 : 0,
      }).then((res) => {
        console.log(res, "状态")

      })
    },
    // 人员生效状态
    setSwitchType(row) {
      console.log(row, "kankan row")
      updateBaseCar({
        // id: row.id,
        // enable: 0,
        // sex: "男",
        // personName: "wangna",
        // picDesc: "wqww",
        // idCard: "411323200011172137",
        // phoneNum: "18545123212",
        // monitorLevel: "二级",
        // personPicUrl: "192.168.20.223:6700/35,818f35e8a2c5?collection=DSPAD010120211015235820-persistent",
        // reserved: "3.3"
        ...row,
        enable: row.enable ? 1 : 0
      }
      ).then((res) => {
        console.log("状态编辑成功", res)
      })
    },
    // 
    closeUpload() {
      this.showUploadImg = false
    }

  },
};
</script>

<style scoped lang="scss">
.btn-pager {
  width: calc(100% - 40px);
  justify-content: left;
  position: relative;
}

.con {

  .container {
    height: calc(100vh - 50px);
    width: 100%;
    margin-top: 20px;
    display: flex;

    .aside {
      width: 20%;
      height: calc(100% - 80px);
      opacity: 1;
      background: #1F2935;
      display: inline-block;
      margin: 0px 20px 0px 0px;

      .aside_libray {
        background: #1F2935;
        width: 100%;
        height: 100%;

        .el-collapse {
          height: 100%;

          .el-collapse-item {
            .operation {
              display: flex;
              width: 100%;
              align-items: center;
              justify-content: space-between;

              p {
                display: flex;
                align-items: center;
                justify-content: space-between
              }

            }

            .el-image {
              padding: 0px 10px;
            }

            .box-card {
              .text_item {
                // height: 76px;
                cursor: pointer;
                border-radius: 9px;
                opacity: 1;
                background: rgba(239, 241, 245, 0.1);
                margin-bottom: 10px;
                padding: 0px 10px;

                .card_top {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;

                  p {
                    display: flex;
                    align-items: center;

                    img {
                      margin-right: 5px;
                    }
                  }

                  i {
                    display: block;
                    width: 10px;
                    height: 10px;
                    background: #fff;
                    border-radius: 50%;
                  }
                }

                .card_bottom {
                  // display:flex;

                }

              }
            }
          }
        }
      }
    }

    .main_box {
      margin-right: 20px;
      background: #141415;
      box-sizing: border-box;
      width: 80%;
      height: calc(100% - 180px);
      border-radius: 8px;
      // opacity: 1;
      // box-shadow: 0px 0px 6px 1px rgba(143, 159, 191, 0.15);
      // color: #fff;

      .header {
        width: 100%;
        box-sizing: border-box;
        height: 80px;
        background-color: #141415;
        display: flex;
        justify-content: space-between;
        align-items: center;
        display: flex;
        // margin-top: 20px;

        .header_left {
          width: 18%;
          height: 80px;
          box-sizing: border-box;

          // display:flex;
          // overflow:hidden;
          h3 {
            margin: 0 0 10px 0;
            font-size: 30px;
            color: #fff;
          }

          .el-breadcrumb {
            color: #fff !important;
          }
        }

        .header_right {
          box-sizing: border-box;
          width: 100%;
          color: #fff;
          height: 80px;
          border-radius: 8px;
          opacity: 1;
          background: #1F2935;
          box-shadow: 0px 0px 6px 1px rgba(143, 159, 191, 0.15);
          display: flex;
          justify-content: space-between;
          align-items: center;

          .header_box {
            margin: 0 20px;
            display: flex;
            align-items: center;

            span {
              margin-right: 10px;
              display: block;
              height: 21px;
              line-height: 20px;
              cursor: pointer;
            }

            span:nth-of-type(1) {
              font-family: PingFang SC;
              font-size: 16px;
              font-weight: normal;
              line-height: 22px;
              letter-spacing: 0px;
              color: #FFFFFF;
            }

            span:nth-of-type(2) {
              width: 36px;
              padding: 2px 10px;
              background: rgba(36, 178, 156, 0.3);
              border-radius: 9px;
              opacity: 1;
              font-family: PingFang SC;
              font-size: 12px;
              font-weight: normal;
              letter-spacing: 0px;
              color: #24B29C;
            }

            .el-switch {
              margin-right: 10px;
            }

            img {
              margin-right: 10px;
              cursor: pointer;
            }
          }
        }
      }

      .main_box_table {
        // height: 100%;
        margin-top: 25px;
        background: #1F2935;

      }

      .main_box_header {
        height: 70px;
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0px 20px;

        .main_box_hr {
          display: flex;
          align-items: center;

          .el-input {
            margin-right: 10px;
            width: 500px;
            cursor: pointer;
          }

          input {
            border-radius: 30px !important;
          }

          img {
            margin-right: 10px;
            cursor: pointer;
          }

          i {
            font-size: 35px;
            margin-right: 5px;
            cursor: pointer;
          }
        }
      }

      .info_title {
        justify-content: space-around;
        font-size: 18px;
        border-bottom: 1.5px solid #ccc;
      }

      .list-view {
        height: calc(100vh - 355px);
        // height: 100%;
        overflow: auto;
        background: #1F2935;

        .list_table {
          // height: calc(100% - 120px);
          // height: calc(100vh - 360px);
          // height: calc(100% - 0px);
          // height: 100%;
          overflow: auto;
        }
      }

      .list_pager {
        height: 40px;
      }

      .form_info_wrap {
        .form_info {
          background-color: #1F2935;
          height: calc(100vh - 130px);

          .el-form {
            margin: 30px;

            .formButton {
              width: 100%;
              display: flex;
              margin-top: 50px;
              align-items: center;
              justify-content: center;

              .el-button {
                width: 150px;
                border-radius: 18px;
              }

              .el-button:nth-of-type(2) {
                background: rgb(78, 148, 255);
                border: rgb(78, 148, 255);
                color: #000;
              }
            }
          }
        }

      }
    }
  }
}

::v-deep {
  .el-breadcrumb__inner {
    color: #fff !important;
  }


  .el-collapse-item__header {
    background: #1F2935;
    color: #fff;

    .el-icon-arrow-right:before {
      display: none;
    }
  }

  .el-collapse-item__content {
    background: #1F2935;
    color: #fff;
  }

  .el-collapse-item__wrap {
    border: none;
  }

  .el-collapse-item__header {
    border: none;
  }

  .el-collapse {
    border: none;
    height: 100%;
    overflow-y: auto;
  }

  .box-card {
    background: #1F2935;
    color: #fff;
    border: none;
  }

  .el-card__body {
    padding: 10px;
  }

  .table-view {
    // height: calc(80% - 260px);
    // height: 100%;
    // overflow: auto;
    background: unset;
  }

  .el-table {
    background: #1F2935;
    overflow: auto;
    // height: 100%;

    th {
      background: #1F2935 !important;
      color: #fff !important;

      .cell {
        color: #fff;
      }
    }
  }

  .has-gutter {
    background: #1F2935 !important;
  }

  .el-table,
  .el-table__expanded-cell {
    background-color: #1F2935 !important;
  }


  .el-form-item__label {
    color: #fff !important;
  }

  .el-radio {
    color: #fff !important;
  }

  .el-checkbox__label {
    color: #fff;
  }

  .that_card {
    background: #4E94FF !important;
  }

  .el-table__body-wrapper {
    height: 100% !important;
  }

  .el-table tr {
    background: #1F2935;
  }

  .el-table tr:hover {
    background: #1F2935;
  }

  .el-table__row {
    color: #fff;

    .el-table__cell {
      color: #fff;

      .el-tooltip {
        color: #fff;
      }
    }
  }

  .el-input-group {
    border: none;
    padding: 0px;
  }

  .el-input-group__append {
    height: 30px !important;
    background-color: #4996D0;
    color: #fff;

    button {
      height: 29px !important;
      background-color: #4996D0;
    }
  }

  // 列表hover效果
  .el-table__cell {
    background-color: unset !important;
  }

  .el-pagination__total {
    color: #fff;
  }

  .el-pagination__jump {
    color: #fff !important;
  }

  .main_box_hr {
    .el-input {
      .el-input__inner {
        border-bottom-left-radius: 18px;
        border-top-left-radius: 18px;
      }

      .el-input-group__append {
        border-bottom-right-radius: 18px;
        border-top-right-radius: 18px;
      }
    }
  }

  .add_car {
    color: #5C5E5F;
  }

  .rowStyle {
    display: flex !important;
    justify-content: center;
    align-items: center;
  }

  .upload-demo {
    background-color: #fff;
    padding: 40px;
  }
}
</style>
